import { t } from 'i18next'
import React, { useEffect, useState } from 'react'
import { StyledModal } from './style'
import { Modal, Select } from '@kedacom/react-next'
import { vmpStyleData, StyleData } from '../interface'

export interface StyleModalProps {
	open: boolean
	style: StyleData
	setOpen: (val: boolean) => void
	onSelect: (id: number) => void
}
export default function StyleModal(props: StyleModalProps) {
	const { open, style, setOpen, onSelect } = props
	const [value, setValue] = useState(0)
	const [curInnerStyle, setCurInnerStyle] = useState(style)
	const [styleData, setStyleData] = useState(vmpStyleData)
	const selectData = [
		{
			value: 0,
			label: t('全部'),
		},
	]
	vmpStyleData.forEach((item) => {
		let count = item.listItemCount
		if (selectData.findIndex((i) => i.value === count) !== -1) return
		selectData.push({
			value: count,
			label: count + t('画面'),
		})
	})
	useEffect(() => {
		setCurInnerStyle(style)
	}, [style])
	useEffect(() => {
		setValue(0)
		setCurInnerStyle(style)
		setStyleData(vmpStyleData)
	}, [open])
	useEffect(() => {
		setStyleData(value === 0 ? vmpStyleData : vmpStyleData.filter((item) => item.listItemCount === value))
	}, [value])
	return (
		<Modal
			open={open}
			title={t('画面合成风格选择')}
			width={732}
			height={408}
			onOk={() => {
				setOpen(false)
				onSelect(curInnerStyle.id)
			}}
			onCancel={() => {
				setOpen(false)
			}}
			okText={t('确定')}
			cancelText={t('取消')}
		>
			<StyledModal>
				<Select
					className="style-select"
					value={value}
					options={selectData}
					onChange={(e, val, opt) => {
						setValue(val)
					}}
				></Select>
				<div className="modal-slider-bar">
					<div className="modal-slider-view">
						<ul>
							{styleData.map((item) => (
								<li
									key={item.id}
									className={`modal-style-box ${item?.className} ${
										item?.id === curInnerStyle.id ? 'select' : ''
									}`}
									data-key={item.dataKey}
									onClick={() => {
										setCurInnerStyle(item)
									}}
								></li>
							))}
						</ul>
					</div>
				</div>
			</StyledModal>
		</Modal>
	)
}
